import React from 'react'

class Form extends React.Component {
	constructor(props) {
		super(props)

		this.state = {
			username: '',
			textarea: '请撰写一篇关于你喜欢的 DOM 元素的文章.',
			selections: 'mango',
			sex: '1',
			hobby: [
				{
					title: '睡觉',
					checked: false,
				},
				{
					title: '吃饭',
					checked: false,
				},
				{
					title: '敲代码',
					checked: false,
				},
			],
			from: this.from,
		}
		// 使ref属性与React组件相连,就不需要放到state里面
		// 使fileInput 与state同级
		this.fileInput = React.createRef()
	}
	changeHobby(key) {
		console.log(this.state.hobby[key])
		var hobby = this.state.hobby
		hobby[key].checked = !hobby[key].checked
		this.setState({
			hobby,
		})
	}

	onForm(event) {
		console.log(this.state)
		// 取消事件的默认动作。例如提交
		event.preventDefault()
	}

	handleChange(e) {
		var target = e.target

		console.log(e.target)
		// target.name表单名
		const name = target.name

		this.setState({
			// name为表单的的name标签属性值，作为state的新属性，值为target.value
			[name]: target.value,
		})
	}
	render() {
		return (
			<>
				<div className="nav2">
					<h4>6.表单的提交和传值</h4>
					{/* 点击提交绑定的事件 */}
					<form onSubmit={this.onForm.bind(this)}>
						<div>
							<label>名字：</label>
							<input
								type="text"
								name="username"
								value={this.state.username}
								onChange={this.handleChange.bind(this)}
							/>
						</div>
						<div>
							<label>文章：</label>
							<textarea
								value={this.state.textarea}
								name="textarea"
								onChange={this.handleChange.bind(this)}
							></textarea>
						</div>
						<div>
							<label>选择你喜欢的风味:</label>
							<select
								value={this.state.selections}
								onChange={this.handleChange.bind(this)}
								name="selections"
							>
								<option value="grapefruit">葡萄柚</option>
								<option value="lime">酸橙</option>
								<option value="coconut">椰子</option>
								<option value="mango">芒果</option>
							</select>
						</div>
						<div>
							<label>文件:</label>
							<input
								type="file"
								ref={this.fileInput}
								multiple="multiple"
							/>
						</div>
						<div>
							<label>性别:</label>
							<input
								name="sex"
								type="radio"
								value="1"
								// 是否为选中状态
								checked={this.state.sex == 1}
								onChange={this.handleChange.bind(this)}
							/>
							男
							<input
								name="sex"
								type="radio"
								value="2"
								checked={this.state.sex == 2}
								onChange={this.handleChange.bind(this)}
							/>{' '}
							女
						</div>
						<div>
							<label>爱好:</label>
							{
								//注意key值指向
								this.state.hobby.map((value, key) => {
									return (
										<span key={key}>
											<input
												type="checkbox"
												checked={value.checked}
												onChange={this.changeHobby.bind(
													this,
													key
												)}
											/>
											{value.title}
										</span>
									)
								})
							}
						</div>
						<div>
							<input type="submit" value="提交" />
						</div>
					</form>
				</div>
			</>
		)
	}
}
export default Form
